<template>
    <div class="calendar-bottom">
       <div class="left">
        <h2>{{ result.lunar }}</h2>
      <h3>{{ result.lunarYear }} {{ result.animalsYear }}</h3>
       </div>
       <div class="right">
        <div>
        宜: <span>{{ result.suit }}</span>
      </div>
      <div>
        忌: <span>{{ result.avoid }}</span>
      </div>
       </div>
    </div>
</template>

<script setup>
import { ref,onMounted } from 'vue'
import { storeToRefs } from 'pinia'
import{useYearsStore} from '@/stores/years'

const years= useYearsStore()
import axios from 'axios';
const {formatDate}=storeToRefs(years)
const result = ref({
  lunar: '',
  lunarYear: '',
  animalsYear: '',
  suit: '',
  avoid: '',
})
onMounted( async () => {

    const key='3fd6905d6a51c66ddd98197a5b81c5b1'
     const res = await axios.get(`/calendar/day?date=${formatDate.value}&key=${key}`)
     result.value=res.data.result.data
})
</script>

<style lang="scss" scoped>
.calendar-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px;
    padding: 20px;
    background-color: #f5f5f5;
    border-radius: 16px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    .left {
    flex: 1;
  }
  .right {
    flex: 2;
    span {
      font-size: 14px;
    }
  }
}
</style>